<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>佣金明细</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
    <meta content="yes" name="apple-mobile-web-app-capable">     
    <meta content="black" name="apple-mobile-web-app-status-bar-style">     
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" type="text/css" href="/H5/css/sm.min.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/balance.css?v=1" />
</head>            
<body>
	<div class="page-group ms-controller" :controller="commissionDetail">
        <div class="page page-current">
            <header class="bar bar-nav">
              	<a class="icon icon-left pull-left" href="javascript:window.history.go(-1);"></a>
              	<a class="icon icon-home pull-right" href="/H5"></a>
              	<h1 class="title">{{@data.order_real_name||""}}产生的消费记录</h1>
            </header>
            <div style="margin-bottom: 0;top: 2.5rem; position: absolute; width: 100%; z-index: 999999">
                <div class="buttons-tab">
                    <a :on-click="@typeChoose(1)" :class="@status==1?'tab-link active button':'tab-link button'">已收益</a>
                    <a :on-click="@typeChoose(0)" :class="@status==0?'tab-link active button':'tab-link button'">预期收益</a>
                </div>
            </div> 
            <div class="content visibility infinite-scroll infinite-scroll-bottom" data-distance="100" style="top: 9rem">
    			<div class="integral_balance" style="position: fixed; width: 100%; top: 4.5rem">
                	<div>{{@data.order_real_name||""}}为您贡献的总收益</div>
                    <div style="font-size:28px;">{{@data.total_commission||""}}</div>
                </div>
                <div class="integral_balance_first" :for="el in @list">
                	<div>
                    	<span style="font-size: .8rem">{{el.title||""}}</span>
                        <span class="balance_first" style="font-size: 1rem; color: #0c0;">+{{el.money||""}}</span>
                    </div>
                    <div>
                    	<span>贡献值 {{el.order_contribution||""}}</span>
                        <span class="balance_gray" style="float: right;">{{el.create_time||""}}</span>
                    </div>
                </div>
                <div :if="@more" class="infinite-scroll-preloader">
                    <div class="preloader"></div>
                </div>
			</div>
        </div>
    </div>
<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/mall.js' charset='utf-8'></script>
<script>
	var commissionDetail = avalon.define({
		$id: "commissionDetail",
		list: [],
		status: Mall.parseUrl( window.location.href ).status,
		type: Mall.parseUrl( window.location.href ).type,
        id: Mall.parseUrl( window.location.href ).uid,
        data: {},
        loading: false,
        more: false,
        page_num: 1,
        page_size: 10,
        typeChoose: function( t ){
        	$( ".content" ).addClass( "visibility" );
        	commissionDetail.list = [];
        	var url = window.location.href.split( "&status=" )[0]+"&status="+t;
        	commissionDetail.status = t;
        	commissionDetail.page_num = 1;
        	window.history.replaceState(null, null, url);
        	commissionDetail.getDetail();
        },
		getDetail: function( o ){
            if( commissionDetail.loading ){
                return
            }
            commissionDetail.loading = true;
			Mall.request( "/api/CommissionSaleDetail", {page_num: commissionDetail.page_num, page_size: commissionDetail.page_size, level: commissionDetail.type, uid: commissionDetail.id, status: commissionDetail.status} )
				.always( function( data ){
                    if( data.error_code == 0 ){
                        commissionDetail.data = data.data;
                        if( o ){
                            commissionDetail.list = commissionDetail.list.concat( data.data.list );
                        }
                        else{
                            commissionDetail.list = data.data.list;
                        }
                        if( commissionDetail.page_num == data.data.page_total ){
                            commissionDetail.more = false;
                        }
                        else{
                            if( data.data.list.length == 0 ){
                                commissionDetail.more = false;
                            }
                            else{
                                commissionDetail.more = true;
                            }
                        }
                        commissionDetail.page_num ++;
                    }
                    else{
                        $.alert(data.error_msg);
                    }
                    commissionDetail.loading = false;
				} )
			$( ".content" ).removeClass( "visibility" )
		},
        infinite: function(){
            $(document).on('infinite', '.infinite-scroll-bottom',function() {
                if( commissionDetail.more ){
                    commissionDetail.getDetail( true );
                }
            });
            $.init();
        }
	})
    commissionDetail.getDetail();
	commissionDetail.infinite();
	avalon.scan( document.body )
</script>
</body>
</html>